<template>
  <div class="good-cart">
      <!--购物车底部通栏-->
      <div class="good-cart-box">
      <div class="left" @click="isShowCartList">
        <div class="cart">
          <i class="icon-shopping_cart"></i>
          <div class="cart-amount">{{ cartAmount }}</div>
        </div>
        <div class="price">￥{{ cartPrice }}</div>
        <div class="delivery">另需配送费4元</div>
      </div>
      <div class="right" :style="styleObj">
        <span>{{ btnMsg }}</span>
      </div>
      </div>
      <!--点击底部通栏,显示购物列表-->
      <div class="cart-list-box" ref="cartList">
         <!-- <goods-cart-list v-show="showCartList"></goods-cart-list>-->
          <goods-cart-list></goods-cart-list>
      </div>
  </div>
</template>

<script>
import goodsCartList from 'components/goods/goods-cart-list'
import { mapState, mapGetters } from 'vuex'

let cartListHeight = 0
let showAnimation = true

export default {
  name: 'goods-cart',
  props: {
    cartAmount: Number,
    cartPrice: Number
  },
  data () {
    return {
      isShow: false,
      btnMsg: '￥ 20起送',
      styleObj: {
        background: '#2b333b'
      }
    }
  },
  components: {
    goodsCartList
  },
  methods: {
    // ...mapMutations(['isShowCartList']),
    isShowCartList () {
      if (this.validCartList.length === 0) {
        showAnimation = true
        return
      }
      if (showAnimation && this.validCartList.length > 0) {
        this.$refs.cartList.style.bottom = '48px'
        this.$refs.cartList.style.transition = 'all 1s linear 0.1s'
        showAnimation = false
      } else {
        this.$refs.cartList.style.bottom = -cartListHeight + 'px'
        this.$refs.cartList.style.transition = 'all 1s linear 0.1s'
        showAnimation = true
      }
    }
  },
  computed: {
    ...mapState({
      cartList: 'cartList',
      showCartList: 'showCartList'
    }),
    ...mapGetters({
      cartAllPrice: 'getCartAllPrice',
      validCartList: 'getValidCartList'
    })
  },
  watch: {
    cartAllPrice () {
      if (this.cartAllPrice < 20) {
        this.btnMsg = '还差' + '￥' + (20 - this.cartAllPrice) + '起送'
      } else {
        this.btnMsg = '去结算'
      }
      if (this.btnMsg === '去结算') {
        this.styleObj.background = '#00b43c'
      } else {
        this.styleObj.background = '#2b333b'
      }
    }
  },
  mounted () {
    cartListHeight = this.$refs.cartList.offsetHeight
    console.log(cartListHeight)
  },
  updated () {
    cartListHeight = this.$refs.cartList.offsetHeight
    this.$refs.cartList.style.transition = ''
    if (showAnimation && this.validCartList.length > 0) {
      this.$refs.cartList.style.bottom = -cartListHeight + 'px'
    }
    if (this.validCartList.length === 0) {
      this.$refs.cartList.style.bottom = -cartListHeight + 'px'
      showAnimation = true
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "~assets/styles/variable.styl"
@import "~assets/styles/mixin.styl"

.good-cart
  position relative
  .good-cart-box
    display flex
    flex-direction row
    justify-content space-between
    width 100%
    height 100%
    line-height 48px
    .left
      background-color #141d27
      flex 1
      display flex
      flex-direction row
      position relative
      .cart
        position absolute
        width 45px
        height 45px
        left 18px
        bottom 8px
        background-color #2b343c
        z-index 999
        border-radius 50%
        text-align center
        .cart-amount
          position absolute
          top -10px
          left 28px
          width 30px
          height 30px
          line-height 30px
          background-color #f01414
          color $color-white
          font-size 8px
          border-radius 50%
          text-align center
        i
          font-size 24px
          line-height 44px
          color #80858a
      .price
        margin-left 80px
        font-size $fontsize-large
        color #919396
        font-weight 350
      .delivery
        font-size $fontsize-medium
        color #919396
        margin-left 24px
    .right
      font-size $fontsize-small
      text-align center
      color rgb(255, 255, 255, 0.4)
      font-weight 350
      width 105px
      padding 0 16px
  .cart-list-box
    position absolute
    left 0
    bottom -40px
    right 0
    z-index 9
/*  .fade-enter-active
    animation goods-cart-enter .5s
  .fade-leave-active
    animation goods-cart-leave .5s
@keyframes goods-cart-enter {
  from {
    height: 0;
  }
  to {
    height: 135px;
  }
}

@keyframes goods-cart-leave {
  from {
      height: 135px;
  }
  to {
      height: 0;
  }
}*/

</style>
